<template>
  <view class="content">
    <BaseNavbar :background="{ background: vSiteConfig.xcx_custom_theme_color }" :title="vSiteConfig.site_info.site_name"
      :isShowBack="false" />
    <view class="search-top">
      <BaseSearch width="80" placeholder="请输入设备编号" @onClickIcon="onClickIcon" @search="searchDevice" />
      <view class="search-right-icon">
        <button open-type="contact" class="serverMenu flexColumnHorzCenter">
          <image class="imgServer" src="@/static/img/icon/service-icon.png"></image>
        </button>
        <view class="notice" @click="goNotice">
          <image class="notice-icon" src="@/static/img/icon/notice-icon.png" />
          <view v-if="vNoticeNum > 0" class="circle"></view>
        </view>
      </view>
    </view>

    <!-- 主体内容区域start -->
    <view class="myHone u-skeleton">
      <view class="myHomes">
        <view class="tabsBox flexRowBetween">
          <view class="tabs">
            <BaseTabs height="44" :current="curTabIndex" :list="tabList" :isShowBar="false" @change="tabChange" />
          </view>
          <view class="showMoneytIcon flexRowAllCenter">
            <block>
              <BaseIcon v-if="isShowMoney" name="eye" size="50" @onClick="onIsShowMoney" />
              <view class="eyefillBox flexRowAllCenter" v-else><img class="eyefill"
                  src="@/static/img/icon/eyefill-icon.png" @click="onIsShowMoney" /></view>
            </block>

            <BaseIcon class="infoCircle" name="info-circle" @onClick="isShowInfoCircle = !isShowInfoCircle" />
          </view>
        </view>
        <view class="moneyPanel" @click="go()">
          <image class="panelImg" src="@/static/img/moneyBg.png" />
          <view class="turnover flexColumnAllBetween">
            <view class="title">收 益</view>
            <view class="moneyBox" v-if="isShowMoney">
              <text>￥</text>
              <BaseCountTo :value="salesInfo[curTabIndex].amount[0]" :size="44" />
              <text> . </text>
              <text v-if="salesInfo[curTabIndex].amount[1] < 10" style="font-size: 15px;
    font-weight: bold;
    color: #fff;">
                0
              </text>
              <BaseCountTo :value="salesInfo[curTabIndex].amount[1]" />
            </view>
            <view v-else class="moneyBox">*****</view>
          </view>
          <view class="dealNum flexColumnAllBetween">
            <view class="title">成交数</view>
            <view class="num">
              <BaseCountTo v-if="isShowMoney" :value="salesInfo[curTabIndex].orderNum" />
              <view v-else>*****</view>
            </view>
          </view>
        </view>
        <view class="updata">
          <BaseUpdata title="收益" @onClick="updataClick" :refresh="manyUpdata"></BaseUpdata>
        </view>
        <view class="myDevice">
          <view class="title">设备概况</view>
          <view class="panel">
            <image class="img" src="@/static/img/myDeviceBg.png" />
            <view class="box flexRowAllCenter">
              <view class="flexColumnAllCenter" v-for="(item, i) in machineStatus" :key="i" @click="device(item, i)">
                <!-- <BaseCountTo :value="item.number" :size="40" color="#333" /> -->
                <view class="font-position">
                  <view class="font-witer">
                    {{ item.number }}
                  </view>
                  <view class="type">{{ item.name }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view class="updata">
          <BaseUpdata title="设备概况" @onClick="undataTimes" :refresh="devUpdata"></BaseUpdata>
        </view>
        <view class="funcs">
          <uni-swiper-dot :info="funcsListSlice" :current="current" :dotsStyles="{
            backgroundColor: 'rgba(83, 200, 249, 0.3)',
            selectedBackgroundColor: 'rgba(83, 200, 249, 0.9)',
            bottom: '0',
          }">
            <swiper class="swiper-box" @change="change">
              <swiper-item v-for="(item, index) in funcsListSlice" :key="index">
                <BaseGrid :gridList="item" width="90rpx" />
              </swiper-item>
            </swiper>
          </uni-swiper-dot>
        </view>
        <view class="cloudCollege" v-if="articleList.length > 0">
          <view class="top flexRowBetween">
            <view class="title">{{ vSiteConfig.site_info.site_name }}云学院</view>
            <view class="more" @click="goMore">
              更多
              <BaseIcon :size="30" name="arrow-right" />
            </view>
          </view>
          <view class="cloudList">
            <CloudVideoCard v-for="(item, index) in articleList" :key="index" :info="item" />
          </view>
        </view>
      </view>
    </view>
    <!-- 主体内容区域end -->
    <BaseModal :show.sync="isShowInfoCircle" :isShowCancel="false" title="名词说明">
      <view slot="default" class="noun">
        <view class="noun-item">
          <view class="noun-item-title">成交额</view>
          <view>统计筛选时段内,状态为已支付得订单金额总和</view>
        </view>
        <view class="noun-item">
          <view class="noun-item-title">成交数</view>
          <view>统计筛选时段内,状态为已支付得订单数量总和</view>
        </view>
        <view class="noun-item">
          <view class="noun-item-title">筛选时间范围示例</view>
          <view class="noun-info">
            <view> 今天是12月31日,对应选择得周期为</view>
            <view>【昨日】则统计12月30日00:00:00-23:59:59的数据</view>
            <view>【今日】则统计12月31日00:00:00-实时的数据</view>
            <view>【近7日】则统计12月24日00:00:00-12月30日23:59:59的数据</view>
            <view>【近30日】则统计12月1日00:00:00-12月30日23:59:59的数据</view>
          </view>
        </view>
      </view>
    </BaseModal>
    <!-- 绑定微信 -->
    <BaseModal :show.sync="isShowModalQrcode" title="扫码、登录、绑定微信" :mask="true" confirmText="保存二维码"
      @confirm="confirmScanQrcode">
      <view class="qrcode">
        <view class="qrcode-img">
          <Uqrcode ref="uQRCode" :text="vSelectSysObj.extra" :margin="10" mode="canvas" />
        </view>
        <view class="qrcode-tip">
          <view>请绑定微信获取消息</view>
          <view>获取消费者消费信息推送</view>
        </view>
      </view>
    </BaseModal>

    <MyTabbar />
  </view>
</template>

<script>
import BaseSearch from "@/components/base/BaseSearch.vue";
import BaseTabs from "@/components/base/BaseTabs.vue";
import MyTabbar from "./MyTabbar.vue";
import BaseNavbar from "@/components/base/BaseNavbar.vue";
import BaseIcon from "@/components/base/BaseIcon.vue";
import BaseCountTo from "@/components/base/BaseCountTo.vue";
import BaseGrid from "@/components/base/BaseGrid.vue";
import CloudVideoCard from "@/components/card/CloudVideoCard.vue";
import UniSwiperDot from "@/components/uni-swiper-dot/uni-swiper-dot";
import BaseModal from "@/components/base/BaseModal.vue";
import Uqrcode from "@/components/uqrcode/uqrcode.vue";
import BaseInput from "../../components/base/BaseInput.vue";
import BaseUpdata from "../../components/base/BaseUpdata.vue";

export default {
  components: {
    MyTabbar,
    BaseSearch,
    BaseTabs,
    BaseNavbar,
    BaseIcon,
    BaseCountTo,
    BaseGrid,
    CloudVideoCard,
    UniSwiperDot,
    BaseModal,
    Uqrcode,
    BaseInput,
    BaseUpdata,

  },


  data() {
    return {
      //title: vSiteConfig.site_info.site_name ,
      upTime: '',
      curTabIndex: 0,
      tabList: [
        {
          name: "今日",
          status: 0,
        },
        {
          name: "昨日",
          status: 1,
        },
        {
          name: "近7日",
          status: 2,
        },
        {
          name: "近30日",
          status: 3,
        },
      ],

      isShowMoney: true,
      funcsList: [],
      funcsListSlice: [],
      machineStatusList: [],
      machineStatus: [
        {
          number: 0,
          name: "在线设备",
        },
        {
          number: 0,
          name: "故障设备",
        },
        {
          number: 0,
          name: "工作设备",
        }
        ,
        {
          number: 0,
          name: "总设备数",
        },
      ],
      salesInfo: [],
      current: 0,
      isShowInfoCircle: false, //显示名词解释弹窗
      articleList: [], //推荐文章
      isShowModalQrcode: false,
      handleInfo: {
        machineStatus: {
          useing: 0,
          waiting: 0,
          total: 0,
        },
        tAmount: {
          orderNum: 0,
          amount: 0,
        },
        yAmount: {
          orderNum: 0,
          amount: 0,
        },
        wAmount: {
          orderNum: 0,
          amount: 0,
        },
        mAmount: {
          orderNum: 0,
          amount: 0,
        },
      }, //手动修改的休息
      manyUpdata: false,//余额更新事件
      devUpdata: false,//设备更新时间
    };
  },
  onLoad() {


    if (!this.vUserInfo.user.openid) this.isShowModalQrcode = true;
    this.setPermissions(this.vUserInfo.role_id)
    this.refresh();
    //金刚区显示功能模块
    this.funcsList.splice(0)
    this.funcsList = [...this.vUserInfo.mini_menu];
    // for (let i = 0; i < this.vUserInfo.mini_menu; i++) {
    //   this.funcsList.push(...this.vUserInfo.mini_menu[i])
    // }
    // this.funcsList.push({
    //   href: "/pagesB/replenish/ReplenishList?from='replenish'",
    //   icon: "https://test.51xhkj.com/upload/admin/20220215/67da33014198c30bd454138ca1ce7285.png",
    //   list_order: 1,
    //   name: "补货",
    // });
    // this.funcsList.push({
    //   href: "/pagesB/renew/RenewList",
    //   icon: "https://test.51xhkj.com/upload/admin/20220215/67da33014198c30bd454138ca1ce7285.png",
    //   list_order: 1,
    //   name: "续费管理",
    // });

    let itemIndex = 0,
      colNum = 8; //每页显示数量
    this.funcsListSlice = []
    while (itemIndex < this.funcsList.length) {
      this.funcsListSlice.push(
        this.funcsList.slice(itemIndex, itemIndex + colNum)
      );
      itemIndex += colNum;
    }

  },
  methods: {
    setPermissions(id) {
    console.log('剪切广告调用此方法')
    if(id>5&&id!=12&&id!=7){
        this.$u.vuex("vInputDisable", true);
      }else{
        this.$u.vuex("vInputDisable", false);
      }
    if(id>5&&id!=12){
        this.$u.vuex("vInputPermissions", true);
      }else{
        this.$u.vuex("vInputPermissions", false);
      }
      if(id<6||id==12){
        this.$u.vuex("vButtonPermissions", true);
      }else{
        this.$u.vuex("vButtonPermissions", false);
      }
      if(id!=6&&id!=8){
        this.$u.vuex("vButtonPermis", true);
      }else{
        this.$u.vuex("vButtonPermis", false);
      }
      if(id!=6&&id<8||id==12){
        this.$u.vuex("vButtonPermisTwo", true);
      }else{
        this.$u.vuex("vButtonPermisTwo", false);
      }
      if(id<8||id==12){
        this.$u.vuex("vButtonPermisThree", true);
      }else{
        this.$u.vuex("vButtonPermisThree", false);
      }
      if(id<5||id==12){
        this.$u.vuex("vButtonPermisFour", true);
      }else{
        this.$u.vuex("vButtonPermisFour", false);
      }
      if(id!=12){
        this.$u.vuex("vButtonPermisAides", true);
      }else{
        this.$u.vuex("vButtonPermisAides", false);
      }
  },
    /* 获取当前时间 */

    /* 更新时间 */
    updataClick() {

      this.getSalesInfo()

    },
    undataTimes() {
      this.getMachineStatus()

    },
    /* 跳转财务管理 */
    go() {
      uni.navigateTo({
        url: "/pagesB/finance/FinanceList",
      });
    },
    //确定修改数据

    confrimHandle() {
      this.machineStatus[0].number = this.handleInfo.machineStatus.useing ?? 0;
      this.machineStatus[1].number = this.handleInfo.machineStatus.waiting ?? 0;
      this.machineStatus[3].number = this.handleInfo.machineStatus.total ?? 0;

      let res = this.handleInfo;
      let moneyArr = [];
      moneyArr = parseFloat(res?.tAmount?.amount).toFixed(2).split(".");
      this.salesInfo[0] = {
        orderNum: res.tAmount.orderNum,
        amount: moneyArr,
      };
      moneyArr = parseFloat(res?.yAmount.amount).toFixed(2).split(".");
      this.salesInfo[1] = {
        orderNum: res.yAmount.orderNum,
        amount: moneyArr,
      };
      moneyArr = parseFloat(res?.wAmount.amount).toFixed(2).split(".");
      this.salesInfo[2] = {
        orderNum: res.wAmount.orderNum,
        amount: moneyArr,
      };
      moneyArr = parseFloat(res?.mAmount.amount).toFixed(2).split(".");
      this.salesInfo[3] = {
        orderNum: res.mAmount.orderNum,
        amount: moneyArr,
      };
    },
    change(e) {
      this.current = e.detail.current;
    },
    onClickIcon(e) {
      console.log("e", e);
    },
    tabChange(e) {
      console.log("点击了Tbas", e);
      this.curTabIndex = e;
    },
    onIsShowMoney() {
      this.isShowMoney = !this.isShowMoney;
    },
    //获取设备信息
    getMachineStatus() {
      this.$u.api.getMachineStatus().then((res) => {
        let i = 0;
        let water;
        var electricity
        var disables
        let y = 0
        for (let key in res) {
          //for循环let key是对象里面的键，再通过,[]的形式this.objNum[item]去获取对象的value值

          if (y == 6) {
            disables = res[key]
          } else if (y == 7) {
            water = res[key]
          } else if (y == 8) {
            electricity = res[key]
          }
          y++

        }

        for (let key in res) {
          //for循环let key是对象里面的键，再通过,[]的形式this.objNum[item]去获取对象的value值
          if (i > 4) break;
          // if(i==2) break; 
          if (i == 1) {
            this.machineStatus[i] = {
              number: `${electricity * 1 + water * 1 + disables * 1}`,//rtnData["Normal"],
              name: `故障设备`,// "在线设备"
            };
          } else if (i == 4) {
            this.machineStatus[2] = {
              number: res[key],//rtnData["Normal"],
              name: key,// "在线设备"
            };
          } else {
            this.machineStatus[i] = {
              number: res[key],//rtnData["Normal"],
              name: key,// "在线设备"
            };
          }

          i++;
        }

        this.devUpdata = !this.devUpdata
      });

      return;

    },
    //获取销售额信息
    getSalesInfo() {
      this.$u.api.getSalesInfo().then((res) => {
        this.salesInfo = [];
        let moneyArr = [];

        // this.salesInfo.push({
        //   orderNum: 332,
        //   amount: ["489", "00"],
        // });
        // this.salesInfo.push({
        //   orderNum: 0,
        //   amount: ["0", "00"],
        // });
        // this.salesInfo.push({
        //   orderNum: 2447,
        //   amount: ["4890", "00"],
        // });
        // this.salesInfo.push({
        //   orderNum: 10479,
        //   amount: ["20900", "08"],
        // });

        moneyArr = parseFloat(res?.todayData?.tAmount).toFixed(2).split(".");
        this.salesInfo.push({
          orderNum: res.todayData?.tOrderNum,
          amount: moneyArr,
        });
        moneyArr = parseFloat(res?.yesterdayData?.yAmount)
          .toFixed(2)
          .split(".");
        this.salesInfo.push({
          orderNum: res.yesterdayData?.yOrderNum,
          amount: moneyArr,
        });
        moneyArr = parseFloat(res?.weekData?.wAmount).toFixed(2).split(".");
        this.salesInfo.push({
          orderNum: res.weekData?.wOrderNum,
          amount: moneyArr,
        });
        moneyArr = parseFloat(res?.monthData?.mAmount).toFixed(2).split(".");
        this.salesInfo.push({
          orderNum: res.monthData?.mOrderNum,
          amount: moneyArr,
        });
        console.log("收益数据", this.salesInfo);
        this.manyUpdata = !this.manyUpdata
      });
    },
    goMore() {
      uni.navigateTo({ url: "/pagesB/cloud/CloudCollege" });
    },
    getArticleList() {
      let data = {
        recommended: true,
      };
      this.$u.api.articleList(data).then((res) => {
        this.articleList = res;
      });
    },
    searchDevice(e) {
      uni.navigateTo({
        url: "/pagesB/device/DeviceDetail?from=home&device_sn=" + e,
      });
    },
    userMessage() {
      this.$u.api.userMessage().then((res) => {
        this.$u.vuex("vNoticeNum", res.data.count);
      });
    },
    goNotice() {
      uni.navigateTo({
        url: "/pagesB/notice/NoticeList",
      });
    },
    confirmScanQrcode() {
      // uni.navigateTo({
      //   url:
      //     "/pagesC/webView/WebView?url=" +
      //     encodeURIComponent(this.vSelectSysObj.extra),
      // });
      this.$refs.uQRCode.toTempFilePath({
        success: (res) => {
          console.log("🚀 ~ res", res);
          uni.saveImageToPhotosAlbum({
            filePath: res?.tempFilePath,
            success: (result) => {
              this.isShowSuccess("二维码保存成功");
            },
            fail: (error) => {
              this.isShowErr("二维码保存失败~");
            },
          });
        },
        fail: (err) => {
          this.isShowErr("二维码保存失败~");
        },
      });
    },
    refresh() {
      //设置默认销售数据
      this.userMessage();
      this.getArticleList();

      let salesInfoData = { orderNum: 0, amount: ["0", "00"] };
      for (let i = 0; i < 4; i++) {
        this.salesInfo.push(salesInfoData);
      }
      this.getSalesInfo();
      this.getMachineStatus();
    },
    /* 设备跳转 */
    device(item, i) {
      console.log(item, i);
      if (this.vInputPermissions) {

        uni.navigateTo({
          url: `/pagesB/replenish/ReplenishList?from=replenish`,
        });
      }
      else if (i == 0) {


        uni.navigateTo({
          url: `/pagesB/device/DeviceList?from=device&status=1`,
        });

      }
      else if (i == 1) {

        uni.navigateTo({
          url: `/pagesB/replenish/ReplenishList?from=replenish`,
        });
      }
      else if (i == 2) {
        uni.navigateTo({
          url: `/pagesB/replenish/ReplenishList?from=replenish`,
        });
        // uni.navigateTo({
        //   url: `/pagesB/replenish/ReplenishList?from=replenish&status=5`,
        // });
      }
      else if (i == 3) {

        uni.navigateTo({
          url: `/pagesB/device/DeviceList?from=device&status=0`,
        });
      }
    },
  },
  onPullDownRefresh() {
    this.refresh();
  },
};
</script>
<style lang="scss">
/*当button里面包含图文时，图文之间会有间距，消除间距的方式是首先对button采用flex竖向布局，然后将子元素的margin和padding设置为0*/
button {
  &:after {
    border: none;
  }

  .button[plain] {
    border: none;
  }

  &:first-child {
    margin-top: 0;
  }

  &:active {
    background-color: white;
  }

  background-color: white;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>
<style lang="scss" scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin: 200rpx auto 50rpx auto;
}

.search-top {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  z-index: 999;
  background-color: #fff;

  .search-right-icon {
    display: flex;
    flex: 1;
    justify-content: space-between;

    .serverMenu {
      border: none;
      padding: 0 !important;
      margin: 0 !important;

      .imgServer {
        width: 44rpx;
        height: 44rpx;
        padding: 0 !important;
        margin: 0 !important;
      }
    }

    .notice {
      position: relative;
      margin-right: 30rpx;

      &-icon {
        width: 40rpx;
        height: 44rpx;
      }

      .circle {
        position: absolute;
        right: 0;
        top: 0;
        width: 12rpx;
        height: 12rpx;
        border-radius: 50%;
        background-color: $textWarn;
      }
    }
  }
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}

.myHone {
  width: 100%;
  overflow: hidden;

  .myHomes {
    padding: 20rpx 30rpx;
    box-sizing: border-box;
  }

  .tabsBox {
    width: 100%;
    height: 52rpx;

    .tabs {
      width: 100%;
    }

    .showMoneytIcon {
      margin-left: 60rpx;

      .eyefillBox {
        width: 50rpx;
        height: 50rpx;

        .eyefill {
          width: 42rpx;
          height: 24rpx;
        }
      }

      .infoCircle {
        margin-left: 32rpx;
      }
    }
  }

  .moneyPanel {
    position: relative;
    margin-top: 34rpx;
    width: 100%;
    height: 142rpx;
    border-radius: 16rpx;
    overflow: hidden;

    .panelImg {
      width: 100%;
      height: 100%;
    }

    .turnover,
    .dealNum {
      width: 50%;
      height: 100%;
      position: absolute;
      top: 0;
      box-sizing: border-box;
      padding: 20rpx 0;

      .title {
        color: $textWhite;
        font-size: $font-size-small;
      }
    }

    .turnover {
      left: 0;

      .moneyBox {
        color: $textWhite;
        font-size: $font-size-middle;
        font-weight: 700;
      }
    }

    .dealNum {
      right: 0;
      color: $textWhite;
      font-weight: bold;
    }
  }

  .myDevice {
    margin-bottom: 10rpx;

    .title {
      color: $textBlack;
      font-weight: 700;
      margin: 40rpx 0 30rpx;
    }

    .panel {
      width: 100%;
      height: 142rpx;
      position: relative;
      border-radius: 16rpx;
      box-sizing: border-box;

      .img {
        width: 100%;
        height: 100%;
      }

      .box {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;

        >view {
          width: 25%;
          height: 100%;
          color: $textBlack;

          .type {
            font-size: $font-size-small;
            margin-top: 16rpx;
          }
        }
      }
    }
  }

  .cloudCollege {
    margin-top: 60rpx;

    .top {
      .title {
        color: $textBlack;
        font-size: $font-size-xlarge;
        font-weight: bold;
      }

      .more {
        color: $textDarkGray;
        font-size: $font-size-base;
      }
    }
  }

  .funcs {
    .swiper-box {
      height: 430rpx;
    }
  }
}

.noun {
  font-size: $font-size-base;
  color: $textDarkGray;

  &-item {
    margin-top: 30rpx;

    &-title {
      font-weight: 700;
      color: $textBlack;
      margin-bottom: 30rpx;
    }
  }

  &-info {
    >view {
      margin-bottom: 10rpx;
    }
  }
}

.qrcode {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;

  &-top {
    color: $textBlack;
    font-size: $font-size-xlarge;
    font-weight: 700;
  }

  &-img {
    margin: 0 auto;
  }

  &-tip {
    margin-top: 10rpx;
  }
}

.font-min {
  text-align: center;
  width: 240rpx;
  font-size: 22rpx !important;

}

.font-witer {
  font-weight: bold;
  font-size: 26rpx;
}

.updata {
  margin-top: 5rpx;
  // border: 1px solid #000;

}

.font-position {
  height: 100rpx;
  // border: 1px solid #000;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;

}

//手动修改
.handle {
  .item {
    &-title {
      color: #333;
      font-weight: 700;
      font-size: $font-size-middle;
    }

    &-content {
      display: flex;
      font-size: $font-size-base;

      &-box {
        display: flex;
        align-items: center;

        &-title {
          flex-shrink: 0;
        }

        &:last-child {
          margin-left: 10rpx;
        }
      }
    }

    &-device {
      font-size: $font-size-base;

      &-box {
        display: flex;
        align-items: center;
        margin-bottom: 10rpx;

        :first-child {
          flex-shrink: 0;
        }

        &-input {
          width: 100%;
          margin-left: 10rpx;
        }
      }
    }
  }
}
</style>
